<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>管理员列表</span>
      </div>
    </template>
    <div class="text item">
		
		<el-button type="primary" @click="handleAdd">添加</el-button>
		
		<el-table :data="tableDatalist" style="width: 100%">
		    <el-table-column label="编号" width="180">
		      <template #default="scope">
		        <div style="display: flex; align-items: center">
		          <!-- <el-icon><timer /></el-icon> -->
		          <span style="margin-left: 10px">{{ scope.row.id }}</span>
		        </div>
		      </template>
		    </el-table-column>
			
		    <el-table-column label="用户名" width="180">
		      <template #default="scope">
		        <div style="display: flex; align-items: center">
		          <!-- <el-icon><timer /></el-icon> -->
		          <span>{{ scope.row.name }}</span>
		        </div>
		      </template>
		    </el-table-column>
			
	
			
			<el-table-column label="权限" width="180">
			  <template #default="scope">
			    <div style="display: flex; align-items: center">
			      <!-- <el-icon><timer /></el-icon> -->
			      <span>{{ scope.row.cdtype }}</span>
			    </div>
			  </template>
			</el-table-column>
			
			
		    <el-table-column label="操作">
		      <template #default="scope">
		        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
		          >修改</el-button
		        >
		        <el-button
		          size="small"
		          type="danger"
		          @click="handleDelete(scope.$index, scope.row)"
		          >删除</el-button
		        >
		      </template>
		    </el-table-column>
		  </el-table>
		  
		  <el-pagination style="margin-top: 20px;"
		      v-model:currentPage="pages.page"
			  v-model:page-size="pages.limit"
		      background 
		      :page-size="pages.limit"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total"
			  @current-change="handleCurrentChange"
		    />
			
			<!-- //修改用户信息 -->
			  <el-dialog v-model="outerVisible"  :title="title">
					<el-form :model="form" label-width="120px">
					    <el-form-item label="用户名">
					      <el-input v-model="form.name" />
					    </el-form-item>
						<el-form-item label="密码">
						  <el-input type="password" v-model="form.pass" />
						</el-form-item>
						<el-form-item label="是否开启">
						 <el-radio-group v-model="form.status">
						      <el-radio label="1" size="large" border>开启</el-radio>
						      <el-radio label="2" size="large" border>关闭</el-radio>
						    </el-radio-group>
						</el-form-item>
						<el-form-item>
						      <el-button type="primary" @click="onSubmit">提交</el-button>
						      <el-button>取消</el-button>
						</el-form-item>
					</el-form>
			  </el-dialog>
	</div>
  </el-card>
</template>
<script  setup>
	import { Timer } from '@element-plus/icons-vue'
	import { ElMessageBox } from "element-plus";
	import {ref,reactive,getCurrentInstance,computed,onMounted} from 'vue'
	import message from "@/requests/message.js";
	const { proxy } = getCurrentInstance()
	const pages = reactive({
		limit:15,
		page:1,
	})
	const total = ref(0)
	const tableData = ref([]);
	const outerVisible = ref(false)
	const title = ref('')
	// 修改用户
	const form = reactive({
	  id:'',
	  name: '',
	  pass: '',
	  status: '',
	})
	onMounted(() => {
	      console.log("组件视图挂载完成")
		  getList();
	});
	const getList = function(){
	//请求数据库获取数据
	proxy.$axiosPost('/admin/Adminlist/index',pages).then(res =>{
		if(res.code==200){
			console.log(res)
			//数组转换
			tableData.value = res.data.items
			total.value = res.data.total
		}else{
			message.error ('接口异常');
		}
	})
	}
	let tableDatalist = computed(() => {
		tableData.value.forEach((e)=>{
			if(e.cdtype==0){
				e.cdtype = '超级管理员'
			}
			if(e.cdtype==1){
				e.cdtype = '车队管理'
			}
			if(e.cdtype==2){
				e.cdtype = '工厂管理人员'
			}
			if(e.cdtype==3){
				e.cdtype = '车队'
			}
			if(e.cdtype==4){
				e.cdtype = '监管人员'
			}
			if(e.cdtype==5){
				e.cdtype = '理货'
			}
			if(e.cdtype==6){
				e.cdtype = '司机'
			}
		})
	    return tableData.value
	})
	const handleAdd = function(){
	  title.value = '添加'
	  outerVisible.value = true
	}
	const handleEdit = function(index, row){
	  console.log(index, row)
	  title.value = '修改'
	  form.id = row.id
	  form.name = row.name
	  form.status = row.status
	  form.pass = row.pass
	  outerVisible.value = true
	}
	const handleDelete = function(index, row){
	  console.log(index, row)
		ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
	            confirmButtonText: "确认",
	            cancelButtonText: "取消",
	            type: "warning",
	          })
	            .then(() => {
	              proxy.$axiosPost('/admin/Adminlist/admindel',{id:row.id}).then(res =>{
	              	 	if(res.code==200){
	              	 		message.success ('删除成功');
	              	 		tableData.value.splice(index, 1);
	              	 	}else{
	              	 		message.error ('接口异常');
	              	 	}
	              })
	            })
	            .catch(() => {
	              message.error ('你点击了取消');
	            });

	  
	
	}
	
	const handleCurrentChange = function(){
		getList();
	}
	const onSubmit = () => {
	  // 修改接口	
	  console.log('submit!')
	  if(title.value=='修改'){
		 proxy.$axiosPost('/admin/Adminlist/adminupdate',form).then(res =>{
		 	if(res.code==200){
		 		console.log(res)
		 			message.success ('修改成功');
		 			outerVisible.value = false
		 			getList();
		 	}else{
		 		message.error ('接口异常');
		 	}
		 }) 
	  }
	  
	  
	  
	  
	}
</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
